<template>
  <view class="container">
    <!-- 头像上传 -->
    <view class="avatar-section">
      <button class="avatar-upload" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image 
          :src="userInfo.avatar || '/static/default-avatar.png'" 
          mode="aspectFill" 
          class="avatar-preview"
        ></image>
        <text class="upload-text">点击上传</text>
      </button>
    </view>
    
    <view class="form-section">
      
      <!-- 昵称 -->
      <view class="form-item nickname-item">
        <text class="label">昵称</text>
        <input 
            type="nickname"
            class="input" 
            v-model="userInfo.nickname" 
            placeholder="请输入昵称"
            placeholder-class="input-placeholder"
            @blur="onNicknameInput"
          />
      </view>
      
      <!-- 分隔线 -->
      <view class="divider"></view>
      
      <!-- 性别 -->
      <view class="form-item">
        <text class="label">性别</text>
        <view class="gender-tags">
          <view 
            class="gender-tag female-tag" 
            :class="{ 'active': userInfo.gender === 'female' }"
            @tap="selectGender('female')"
          >
            <!-- <text class="gender-emoji">♀</text> -->
            <text>女</text>
          </view>
          <view 
            class="gender-tag male-tag" 
            :class="{ 'active': userInfo.gender === 'male' }"
            @tap="selectGender('male')"
          >
            <!-- <text class="gender-emoji">♂</text> -->
            <text>男</text>
          </view>
        </view>
      </view>
      
      <!-- 分隔线 -->
      <view class="divider"></view>
      
      <!-- 水平 -->
      <view class="form-item" @tap="showSkillLevelModal">
        <text class="label">水平</text>
        <view class="skill-level-selector">
          <text class="skill-level-text">{{ userInfo.skillLevel || '请选择水平' }}</text>
          <!-- <text class="arrow">></text> -->
        </view>
      </view>
      
    </view>
    
    <!-- 保存按钮 -->
    <button class="save-btn" @tap="saveUserInfo" :disabled="isSaving">{{isSaving ? '保存中...' : '保存'}}</button>
    
    <!-- 水平选择底部模态框 -->
    <view class="skill-modal-overlay" v-if="showSkillModal" @tap="hideSkillLevelModal">
      <view class="skill-modal" @tap.stop>
        <!-- 模态框头部 -->
        <view class="modal-header">
          <!-- 标题和描述 -->
          <view class="modal-title">设置网球水平</view>
          <view class="modal-subtitle">
            <text class="subtitle-text">请认真设置您的网球水平和能力，方便大家找到合适的球搭子</text>

          </view>
        </view>
        
        <!-- 水平选项列表 -->
        <view class="skill-options">
          <view 
            class="skill-option" 
            :class="{ 'selected': selectedSkillLevel === item.level }"
            v-for="(item, index) in skillLevels" 
            :key="index"
            @tap="selectSkillLevel(item)"
          >
            <view class="skill-level">{{ item.level }}</view>
            <view class="skill-remark">{{ item.remark }}</view>
          </view>
        </view>
        
        <!-- 模态框底部 -->
        <view class="modal-footer">
          <button class="next-btn" @tap="confirmSkillLevel" :disabled="!selectedSkillLevel">下一步</button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '',
        nickname: '',
        gender: '',
        skillLevel: ''
      },
      genderOptions: [
        { label: '女', value: 'female' },
        { label: '男', value: 'male' }
      ],
     skillLevels: [
    { level: '1.0级别', remark: '纯新手，不会握拍与击球，无法参与任何形式对打' },
    { level: '1.5级别', remark: '初识基础握拍，偶能击正手短球，难形成连续回球' },
    { level: '2.0级别', remark: '掌握正手基础动作，单次击球可行，无法连续对打' },
    { level: '2.5级别', remark: '正手可连打5-10拍，反手偶能击，发球难进区' },
    { level: '3.0级别', remark: '正反手对打稳定，尝试发球成功率低，会简单截击' },
    { level: '3.5级别', remark: '控回球深度与落点，发球成功率60%+，能截击变线' },
    { level: '4.0级别', remark: '用攻防战术，稳处理旋转球，二发靠旋转降失误' },
    { level: '4.5级别', remark: '全场移动击球，发球带旋100km/h+，会高压得分' },
    { level: '5.0级别', remark: '具专业技术框架，灵活调战术，战地区高级业余赛' },
    { level: '5.5级别', remark: '准职业水平，备职业赛事，应对高强度专业训练' }
    ],
      showAvatarPopup: false,
      isSaving: false,
      showSkillModal: false,
      selectedSkillLevel: ''
    }
  },
  onLoad() {
    // 获取用户信息
    this.loadUserInfo();
  },
  methods: {
    // 选择头像
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      // 在微信小程序中，avatarUrl是临时文件路径，需要读取文件内容并转换为base64
      if (avatarUrl) {
        // 使用微信的 FileSystemManager 读取文件
        const fileManager = uni.getFileSystemManager();
        fileManager.readFile({
          filePath: avatarUrl,
          encoding: 'base64',
          success: (res) => {
            // 将读取到的base64数据转换为data URL格式
            this.userInfo.avatar = `data:image/jpeg;base64,${res.data}`;
          },
          fail: (err) => {
            console.error('读取头像文件失败:', err);
            // 读取失败时，使用原始URL
            this.userInfo.avatar = avatarUrl;
          }
        });
      }
    },
    
    // 输入昵称
    onNicknameInput(e) {
      this.userInfo.nickname = e.detail.value;
    },
    
    // 加载用户信息
    async loadUserInfo() {
        // 如果全局状态没有用户信息，尝试从本地存储获取
        const openid = uni.getStorageSync('openid');
        if (openid) {
          // 先尝试从缓存获取用户信息
          const cachedUserInfo = uni.getStorageSync('cachedUserInfo');
          if (cachedUserInfo) {
            console.log('从缓存获取用户信息:', cachedUserInfo);
            // 处理头像数据，如果avatar是临时文件路径，则读取文件内容
            let avatar = cachedUserInfo.avatar || '';
            
            // 检查是否为临时文件路径
            if (avatar && (avatar.includes('http://tmp/') || avatar.includes('wxfile://'))) {
              try {
                // 读取临时文件并转换为base64
                const fileContent = await this.readFileAsBase64(avatar);
                avatar = `data:image/jpeg;base64,${fileContent}`;
              } catch (error) {
                console.error('读取头像文件失败:', error);
                avatar = '';
              }
            }
            
            this.userInfo = {
              avatar: avatar,
              nickname: cachedUserInfo.nickname || '',
              gender: cachedUserInfo.gender || 'female',
              skillLevel: cachedUserInfo.skill_level || '2.0'
            };
          }
          
          // 调用云函数查询用户信息
          try {
            const queryRes = await uni.request({
          url: 'https://fc-mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.next.bspapp.com/cloudfunctions/queryUser',
          method: 'POST',
          header: {
            'content-type': 'application/json'
          },
          data: {
            openid: openid
          }
        });
            
            console.log('Query user result:', queryRes);
            
            if (queryRes.statusCode === 200 && queryRes.data.code === 0 && queryRes.data.data && queryRes.data.data.length > 0) {
              const userInfo = queryRes.data.data[0];
              // 处理头像数据，如果avatar是临时文件路径，则读取文件内容
              let avatar = userInfo.avatar || '';
              
              // 检查是否为临时文件路径
              if (avatar && (avatar.includes('http://tmp/') || avatar.includes('wxfile://'))) {
                try {
                  // 读取临时文件并转换为base64
                  const fileContent = await this.readFileAsBase64(avatar);
                  avatar = `data:image/jpeg;base64,${fileContent}`;
                } catch (error) {
                  console.error('读取头像文件失败:', error);
                  avatar = '';
                }
              }
              
              this.userInfo = {
                avatar: avatar,
                nickname: userInfo.nickname || '',
                gender: userInfo.gender || 'female',
                skillLevel: userInfo.skill_level || '2.0'
              };
              
              // 更新缓存中的用户信息
              uni.setStorageSync('cachedUserInfo', this.userInfo);
              console.log('缓存中的用户信息已更新:', this.userInfo);
            } else {
              // 如果查询不到用户信息，使用模拟数据
              this.userInfo = {
                avatar: '',
                nickname: '默认昵称',
                gender: 'female',
                skillLevel: '2.0'
              };
            }
          } catch (error) {
            console.error('查询用户信息失败:', error);
            // 查询失败时使用模拟数据
            this.userInfo = {
              avatar: '',
              nickname: '默认昵称',
              gender: 'unknown',
              skillLevel: '2.0'
            };
          }
        }
      
    },
    
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.userInfo.avatar = tempFilePath;
        }
      });
    },
    
    // 显示头像选项弹窗
    showAvatarOptions() {
      uni.showActionSheet({
        itemList: ['选择本地图片'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.chooseAvatar();
          }
        }
      });
    },
    
    // 选择性别
    selectGender(value) {
      this.userInfo.gender = value;
    },
    
    // 显示水平选择模态框
    showSkillLevelModal() {
      this.selectedSkillLevel = this.userInfo.skillLevel;
      this.showSkillModal = true;
    },
    
    // 隐藏水平选择模态框
    hideSkillLevelModal() {
      this.showSkillModal = false;
    },
    
    // 选择水平
    selectSkillLevel(skillItem) {
      this.selectedSkillLevel = skillItem.level;
    },
    
    // 确认水平选择
    confirmSkillLevel() {
      if (this.selectedSkillLevel) {
        this.userInfo.skillLevel = this.selectedSkillLevel;
        this.hideSkillLevelModal();
      }
    },
    
    // 读取文件并转换为 base64
    readFileAsBase64(filePath) {
      return new Promise((resolve, reject) => {
        // #ifdef H5
        // H5 环境下使用 FileReader
        const reader = new FileReader();
        reader.onload = (e) => {
          resolve(e.target.result.split(',')[1]); // 去掉 data:image/*;base64, 前缀
        };
        reader.onerror = reject;
        reader.readAsDataURL(filePath);
        // #endif
        
        // #ifndef H5
        // 非 H5 环境下使用 uni.getFileSystemManager
        const fileManager = uni.getFileSystemManager();
        // 直接使用文件路径，包括临时文件路径（如 http://tmp/ 开头的路径）
        fileManager.readFile({
          filePath: filePath,
          encoding: 'base64',
          success: (res) => {
            resolve(res.data);
          },
          fail: (err) => {
            console.error('读取文件失败:', err);
            reject(err);
          }
        });
        // #endif
      });
    },
    
    // 验证URL格式是否有效
    isValidUrl(url) {
      if (!url || typeof url !== 'string') {
        return false;
      }
      // 检查是否以http://或https://开头，但排除http://tmp/开头的临时文件路径
      return (url.startsWith('http://') || url.startsWith('https://')) && !url.startsWith('http://tmp/');
    },
    
    // 检查是否为有效的文件路径（包括本地文件和微信临时文件）
    isValidFilePath(url) {
      if (!url || typeof url !== 'string') {
        return false;
      }
      // 检查是否以/、file://、wxfile://或http://tmp/开头
      return url.startsWith('/') || url.startsWith('file://') || url.startsWith('wxfile://') || url.startsWith('http://tmp/');
    },
    
    // 保存用户信息
    async saveUserInfo() {
      // 防止重复提交
      if (this.isSaving) {
        return;
      }
      
      // 设置保存状态
      this.isSaving = true;
      
      // 获取 openid
      const openid = uni.getStorageSync('openid');
      console.log('Retrieved openid from storage:', openid);
      
      if (!openid) {
        uni.showToast({
          title: '用户未登录',
          icon: 'none'
        });
        this.isSaving = false;
        return;
      }
      
      // 准备用户信息
      const userInfo = {
        openid,
        nickname: this.userInfo.nickname,
        gender: this.userInfo.gender,
        skillLevel: this.userInfo.skillLevel
      };
      
      // 如果有头像，统一转换为base64格式并保存到avatar字段
      if (this.userInfo.avatar) {
        // 判断是否为base64格式
        if (this.userInfo.avatar.startsWith('data:image') && this.userInfo.avatar.includes('base64')) {
          // 已经是base64格式，直接使用
          userInfo.avatar = this.userInfo.avatar;
        } 
        // 判断是否为有效的文件路径（包括本地文件和微信临时文件）
        else if (this.isValidFilePath(this.userInfo.avatar)) {
          // 读取本地文件内容并转换为 base64
          const fileContent = await this.readFileAsBase64(this.userInfo.avatar);
          userInfo.avatar = `data:image/jpeg;base64,${fileContent}`;
        } 
        // 判断是否为有效的网络图片URL
        else if (this.isValidUrl(this.userInfo.avatar)) {
          // 如果是有效的网络图片URL，直接保存URL，不进行下载转换
          // 这样可以避免下载失败的问题，同时保持头像的可用性
          userInfo.avatar = this.userInfo.avatar;
          console.log('使用网络头像URL:', this.userInfo.avatar);
        } else {
          // URL格式无效，跳过头像处理
          console.warn('无效的头像URL格式:', this.userInfo.avatar);
        }
      }
      
      // 调用云函数查询用户信息
      let queryRes;
      try {
        queryRes = await uni.request({
          url: 'https://fc-mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.next.bspapp.com/cloudfunctions/queryUser',
          method: 'POST',
          header: {
            'content-type': 'application/json'
          },
          data: JSON.stringify({ openid })
        });
        
        console.log('Query user result:', queryRes);
        
        if (queryRes.statusCode !== 200 || queryRes.data.code !== 0 || !queryRes.data.data || queryRes.data.data.length === 0) {
          uni.showToast({
            title: '用户不存在',
            icon: 'none'
          });
          this.isSaving = false;
          return;
        }
      } catch (error) {
        console.error('查询用户信息失败:', error);
        uni.showToast({
          title: '查询用户信息失败',
          icon: 'none'
        });
        this.isSaving = false;
        return;
      }
      
      // 如果用户没有修改头像，则保留原有的avatar字段
      if (!this.userInfo.avatar && queryRes.data.data && queryRes.data.data.length > 0) {
        const existingUserInfo = queryRes.data.data[0];
        if (existingUserInfo.avatar) {
          userInfo.avatar = existingUserInfo.avatar;
        }
      }
      
      // 调用云函数更新用户信息
      uni.showLoading({
        title: '保存中...'
      });
      
      try {
        const res = await uni.request({
          url: 'https://fc-mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.next.bspapp.com/cloudfunctions/updateUserInfo',
          method: 'POST',
          header: {
            'content-type': 'application/json'
          },
          data: userInfo
        });
        
        uni.hideLoading();
        
        if (res.statusCode === 200 && res.data.code === 0) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          
          // 更新全局状态
          const globalData = getApp().globalData;
          if (globalData) {
            globalData.userInfo = {
              ...globalData.userInfo,
              ...userInfo
            };
          }
          
          // 更新缓存中的用户信息
          const cachedUserInfo = uni.getStorageSync('cachedUserInfo') || {};
          const updatedUserInfo = { ...userInfo };
          uni.setStorageSync('cachedUserInfo', updatedUserInfo);
          console.log('缓存中的用户信息已更新:', updatedUserInfo);
          
          // 通知个人中心页面更新数据
          uni.$emit('updateUserInfo');
          
          // 返回上一页
          setTimeout(() => {
            this.isSaving = false;
            uni.navigateBack();
          }, 1000);
        } else {
          uni.showToast({
            title: res.data.message || '保存失败',
            icon: 'none'
          });
          this.isSaving = false;
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        });
        console.error('保存用户信息失败:', error);
        this.isSaving = false;
      }
    },
    

  }
}
</script>
<style>
page{
  background-color: #F2F2F6;
}
</style>
<style scoped>
.container {
  padding: 20rpx;
  padding-top: calc( env(safe-area-inset-top) + 20rpx);
}

.form-section {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 24rpx;
  margin-top: 20rpx;
}

.form-item {
  /* margin-bottom: 30rpx; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 15rpx;
}

.form-item:last-child {
  margin-bottom: 0;
  margin-top: 20rpx;
}


.label {
  display: flex;
  width: 120rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-right: 20rpx;
}

.input {
  /* padding: 24rpx 32r p x; */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 32rpx;
  color: #666;
  font-weight: 400;
  text-align: right !important;
  /* direction: rtl; */
  margin-right: 20rpx;
  -webkit-appearance: none;
  -webkit-transform: translateZ(0px);
  -webkit-user-select: auto !important;
}

.input-placeholder {
  text-align: right !important;
  text-align: end !important;
  color: #999;
  font-weight: 500;
  font-size: 32rpx;
}

.input::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.input:active::before {
  left: 100%;
}

.input:active {
  /* transform: scale(0.98); */
  background: rgba(0, 122, 255, 0.1);
}

.gender-tags {
  display: flex;
  align-items: center;
  /* flex: 1; */
  /* padding: 24rpx 32rpx; */
  background: rgba(255, 255, 255, 0.6);
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  color: #666;
  padding: 15rpx;
}

.gender-tags::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.gender-tags:active::before {
  left: 100%;
}

.gender-tags:active {
  /* transform: scale(0.98); */
  background: rgba(0, 122, 255, 0.1);
  color: #fff !important;   
}
.gender-tag:nth-child(2) {
  margin-right: 0rpx;
}
.gender-tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 200rpx;
  transition: all 0.3s ease;
  position: relative;
  border: none;
  font-size: 32rpx;
  background: rgba(255, 255, 255, 0.5);
  line-height: 32rpx;
  border: 2rpx solid #f5f5f5;
  overflow: hidden;
}

.gender-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.gender-tag:active::before {
  left: 100%;
}

.gender-tag:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.7);
}

.gender-tag.female-tag.active {
  background: rgba(7, 193, 96, 0.8);
  border: none;
  color: #fff;
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.gender-tag.male-tag.active {
  background: rgba(7, 193, 96, 0.8);
  border: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.nickname-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.wechat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 20rpx;
  margin-left: 20rpx;
  border-radius: 200rpx;
  transition: all 0.3s ease;
  position: relative;
  border: none;
  font-size: 28rpx;
  background: rgba(255, 255, 255, 0.5);
  line-height: 28rpx;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8rpx 24rpx 0 rgba(0, 0, 0, 0.1),
    0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05),
    inset 0 1rpx 2rpx 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
  white-space: nowrap;
}

.wechat-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.wechat-btn:active::before {
  left: 100%;
}

.wechat-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 
    0 4rpx 16rpx 0 rgba(0, 0, 0, 0.15),
    0 2rpx 8rpx 0 rgba(0, 0, 0, 0.1),
    inset 0 1rpx 2rpx 0 rgba(255, 255, 255, 0.4);
}

.picker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* padding: 24rpx 32rpx; */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 32rpx;
  color: #666;
  font-weight: 500;
  text-align: right;
  padding-right: 80rpx;
}

.picker::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.picker:active::before {
  left: 100%;
}

.picker:active {
  /* transform: scale(0.98); */
  background: rgba(0, 122, 255, 0.1);
}

/* 添加箭头样式 */
.picker::after {
  content: '';
  position: absolute;
  top: 30%;
  right: 32rpx;
  width: 16rpx;
  height: 16rpx;
  border-right: 2rpx solid #999;
  border-bottom: 2rpx solid #999;
  transform: translateY(-50%) rotate(45deg);
  transition: border-color 0.3s ease;
}

.picker:active::after {
  border-color: #007aff;
}

.avatar-section {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.avatar-upload {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 1rpx dashed #ccc;
  margin: 40rpx 0;
}

.avatar-preview {
  width: 100%;
  height: 100%;
}

.upload-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 24rpx;
  text-align: center;
  padding: 4rpx 0;
}

.save-btn {
  padding: 10rpx 48rpx;
  background: #42CF7F;
  color: white;
  border-radius: 24rpx;
  font-size: 38rpx;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  min-width: 160rpx;
  text-align: center;
  border-radius: 24rpx;
  margin: 40rpx auto 0;
  display: block;
  width: 100%;
}

.save-btn:active {
  /* transform: scale(0.95); */
  background: #3ab66f;
}

.save-btn[disabled] {
  background: #cccccc;
  color: #999999;
  box-shadow: none;
  cursor: not-allowed;
}

/* 分隔线样式 */
.divider {
  width: 100%;
  height: 1rpx;
  background-color: rgba(0, 0, 0, 0.05);
  margin: 20rpx auto;
}

/* 退出登录按钮样式 */
.logout-btn {
  padding: 10rpx 48rpx;
  background: rgba(255, 59, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  border-radius: 32rpx;
  font-size: 38rpx;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8rpx 24rpx 0 rgba(255, 59, 48, 0.4),
    0 4rpx 12rpx 0 rgba(255, 59, 48, 0.2),
    inset 0 1rpx 2rpx 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  min-width: 160rpx;
  text-align: center;
  border-radius: 200rpx;
  margin: 20rpx auto 0;
  display: block;
  width: 90%;
}

.logout-btn:active {
  /* transform: scale(0.95); */
  background: rgba(255, 59, 48, 0.95);
  box-shadow: 
    0 4rpx 16rpx 0 rgba(255, 59, 48, 0.5),
    0 2rpx 8rpx 0 rgba(255, 59, 48, 0.3),
    inset 0 1rpx 2rpx 0 rgba(255, 255, 255, 0.4);
}

/* 水平选择器样式 */
.skill-level-selector {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.skill-level-text {
  color: #666;
  font-size: 32rpx;
  margin-right: 10rpx;
}

.arrow {
  color: #999;
  font-size: 32rpx;
}

/* 底部模态框样式 */
.skill-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}

.skill-modal {
  width: 100%;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

/* 模态框头部 */
.modal-header {
  padding: 40rpx 40rpx 20rpx;
  border-bottom: 1px solid #f0f0f0;
}



.modal-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.modal-subtitle {
  margin-bottom: 20rpx;
}

.subtitle-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.balance-tip {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  border: 1px solid #e9ecef;
}

.tip-icon {
  width: 32rpx;
  height: 32rpx;
  background: #42CF7F;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  font-weight: bold;
  margin-right: 12rpx;
}

.tip-text {
  font-size: 28rpx;
  color: #42CF7F;
  font-weight: 500;
}

/* 水平选项列表 */
.skill-options {
  flex: 1;
  
  overflow-y: auto;
}

.skill-option {
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 40rpx;
}

.skill-option:last-child {
  border-bottom: none;
}

.skill-option.selected {
  background: #eafff3;
}

.skill-option.selected .skill-level {
  color: #42CF7F;
  font-weight: 600;
}

.skill-option.selected .skill-remark {
  color: #42CF7F;
}

.skill-level {
  font-size: 36rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 8rpx;
  text-align: center;
}

.skill-remark {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
  text-align: center;
}

/* 模态框底部 */
.modal-footer {
  padding: 30rpx 40rpx 100rpx;
  border-top: 1px solid #f0f0f0;
}

.next-btn {
  width: 100%;
  height: 110rpx;
  background: #42CF7F;
  color: white;
  border: none;
  border-radius: 24rpx;
  font-size: 36rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-btn:disabled {
  background: #ccc;
  color: #999;
}
</style>
